<template>
  <div style="height: 100%">
    <iframe
      ref="refIframe"
      class="iframe-view"
      src="/resource/turn/index.html"
      width="100%"
      height="100%"
    />
  </div>
</template>

<script lang="ts" setup name="turn">
  import useFullscreen from '@/hooks/useFullscreen'
  import imgJson from './imgs.json'

  const imgSrcList = imgJson.imgs
  const catalogue = {
    title: '特药系统说明书',
    directoryList: [
      {
        id: 1,
        title: '目录一目录一目录一目录一目录一目录一目录一',
        pth: 1
      },
      {
        id: 2,
        title: '目录二',
        pth: 2
      },
      {
        id: 3,
        title: '目录三',
        pth: 3
      },
      {
        id: 4,
        title: '目录四',
        pth: 4
      },
      {
        id: 5,
        title: '目录五',
        pth: 5
      },
      {
        id: 6,
        title: '目录六目录六目录六目录六',
        pth: 6
      },
      {
        id: 7,
        title: '目录七',
        pth: 4
      },
      {
        id: 8,
        title: '目录八目录八目录八目录八目录八',
        pth: 5
      },
      {
        id: 9,
        title: '目录九目录九目录九目录九目录九目录九',
        pth: 6
      }
    ],
    coverImg:
      'https://jonesxie.gitee.io/css-tricks/assets/img/bg11.69cf48f9.jpg',
    totalPage: imgSrcList.length + 1
  }

  const refIframe = ref<HTMLIFrameElement | null>(null)
  const { isFullscreen, toggle } = useFullscreen(refIframe)

  // 请求目录列表+从第一张图片开始请求
  const requestCatalogue = () => {
    setTimeout(() => {
      addCatalogue(catalogue)
    }, 1000)
  }

  const requestImageList = (imgPths) => {
    const requestList = imgPths.map((imgPth) => requestImage(imgPth))
    Promise.all(requestList)
  }

  const requestImage = (imgPth) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const src = imgSrcList[imgPth - 2]
        sendImgUrlByPth(src, imgPth)
      }, 200)
    })
  }

  const addCatalogue = (catalogue) => {
    refIframe.value?.contentWindow?.postMessage(
      JSON.stringify({
        mode: 'catalogue',
        data: catalogue
      })
    )
  }

  const sendImgUrlByPth = (src, pth) => {
    refIframe.value?.contentWindow?.postMessage(
      JSON.stringify({
        mode: 'img',
        data: { src, pth }
      })
    )
  }

  const handleFullScreen = () => {
    if (isFullscreen.value === false) toggle()
  }

  const handleNotFullScreen = () => {
    if (isFullscreen.value === true) toggle()
  }

  window.addEventListener('message', (message) => {
    const { mode, data } = JSON.parse(message.data) || {}
    if (!mode) return
    switch (mode) {
      case 'img':
        requestImageList(data.imgPths)
        break
      case 'full':
        handleFullScreen()
        break
      case 'not-full':
        handleNotFullScreen()
        break
    }
  })

  const getFullscreenElement = () => {
    return (
      document['fullscreenElement'] ||
      document['mozFullScreenElement'] ||
      document['msFullScreenElement'] ||
      document['webkitFullscreenElement'] ||
      null
    )
  }

  document.addEventListener('fullscreenchange', () => {
    refIframe.value?.contentWindow?.postMessage(
      JSON.stringify({
        mode: 'fullScreen',
        data: { isFullscreen: getFullscreenElement() }
      })
    )
  })

  onMounted(() => {
    nextTick(() => {
      requestCatalogue()
    })
  })
</script>

<style lang="less" scoped>
  .iframe-view {
    border: none;
  }
</style>
